<template>
  <div v-if='hasContent==1' class="app">
    <v-header>
      <div class="nav-tab2">
        <h3>{{brandInfo.name}}</h3>
      </div>
    </v-header>
    <div class="infoContent" ref='infoContent' v-show='hasData'>
      <div ref='info_head'>
        <div class="infoHeader">
          <img v-lazy="https(brandInfo.coverurl)" alt="" class="info_bg">
          <div class="logoContent">
            <section class="infoLogo" >
              <img :src="brandInfo.logourl|https" alt="">
            </section>
            <p class="">{{brandInfo.memo}}</p>
          </div>
        </div>
        <div class="infoDes" :class='{tImg:showP}'>
          <h3 :class="{hasInfo:brandInfo.descrition}">{{brandInfo.name}}</h3>
          <p ref='desP' class="desP " :class='{showP:showP}'>{{brandInfo.descrition}}</p>
          <div v-if='showImg' class="brand_down">
            <img v-lazy="https(brandDown)" alt="" @click='showP=!showP'>
          </div>
        </div>
        <div class="infoList">
          <h3>LOOK BOOK</h3>
          <SwiperUnit :swList='infoList' :brandSw='brandSw' class="ss"></SwiperUnit>
        </div>
      </div>

      <div class="search_brand">
        <SearchList :keyword='brandInfo.name' :isShow='1' :fixBar='isFixBar' :brandId='brandInfo.id' v-if='hasData'></SearchList>
      </div>
    </div>
  </div>
 <v-error v-else></v-error>
</template>
<script>
  import * as api from '../../../common/api/article'
  import SearchList from '../../templates/SearchList'
  import SwiperUnit from '../../templates/SwiperUnit'
  // import { APP } from '../../../common/util'
  export default {
    data() {
      return {
        brandInfo: {},
        infoList: [],
        brandDown: '//files.eyee.com/mcdn/static/img/brand_down.png', // require('../../../assets/img/brand_down.png'),
        showP: false,
        showImg: false,
        hasData: false,
        isFixBar: false,
        brandSw: true,
        hasContent: 1
      }
    },
    components: { SearchList, SwiperUnit },
    mounted() {
      let brandid = this.$route.params.id
      var that = this
      api.LibraryByBrandId({ brandid }).then(function (res) {
        if (res && res.info) {
          let info = res.info
          info.id = brandid
          console.log('品牌库二级列表', res)
          that.hasContent = 1
          that.brandInfo = info
          that.initShare({ type: 0, info: { title: '斗牛-' + info.name, img: info.logourl, desc: info.memo }})
          that.infoList = res.items
          that.hasData = true
        } else {
          that.hasContent = 2
          that.toast('加载失败')
        }
      }).catch(function (err) {
        that.hasContent = 2
        console.error(err)
        that.toast('加载失败')
      })
    },
    updated() {
      if (this.$refs.desP && this.$refs.desP.clientHeight >= 118) {
        this.showImg = true
      } else {
        this.showImg = false
      }
    }
  }

</script>
<style scoped>
  .infoContent {
    background: #eee;
  }

  .infoHeader {
    width: 100%;
    height: 280px;
    overflow: hidden;
    position: relative;
  }

  .infoHeader>.info_bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    filter: blur(5px);
    transform: translate(-50%,-50%);
  }

  .logoContent {
    width: 100%;
    padding: 60px 30px;
    font-size: 12px;
    color: #ffffff;
    line-height: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.50);
    text-align: center;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.20);
    height: 100%;
  }

  .infoHeader .infoLogo {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 10px;
  }

  .infoLogo img {
    width: 100%;
  }

  .logoContent p {
    text-indent: 1.5rem;
    max-height: 120px;
    overflow: hidden;
  }

  .infoDes {
    background-color: #fff;
    margin-top: 10px;
    padding: 20px;
  }

  .infoDes h3.hasInfo {
    margin-bottom: 20px;
  }

  .desP {
    font-size: 1rem;
    font-size: 12px;
    color: #666666;
    letter-spacing: 0;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
  }

  .showP {
    display: block;
  }

  .infoDes img {
    width: 100%;
  }

  .infoDes .brand_down {
    width: 20px;
    margin: 20px auto 0;
  }

  .tImg img {
    transform: rotate(180deg)
  }

  .infoList {
    margin: 5px auto;
    background-color: #fff;
    padding: 30px 0;
  }

  .infoList h3 {
    margin: 0 0 30px 20px
  }

  .search_brand {
    background-color: #fff;
    z-index: 3;
  }
</style>
